<template>
  <div class="zq_level">

    <header>
      <div class="header-icon"></div>
      <div class="header-text">用户等级</div>
    </header>

    <main>
      <div class="main_tab">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'text-align': 'center', background: '#f5f7fa' }"
          style="width: 100%"
        >
          <el-table-column
            prop="levelNum"
            label="等级数"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="levelName"
            label="等级名称"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="levelTime"
            align="center"
            label="盒子游戏在线时长"
          >
          </el-table-column>
          <el-table-column prop="levelUp" align="center" label="每日金币上限">
          </el-table-column>
          <el-table-column prop="levelAdd" align="center" label="任务金币加成">
          </el-table-column>
        </el-table>
      </div>
    </main>

    <footer>
      <div class="main-cont">
        <div class="main-tips dj-tips">{{tips.title}}</div>
        <p v-for="(item,index) in tips.tipsList" :key="index">{{item}}</p>
        <div class="main-sm dj-sm">{{citing.title}}</div>
        <div class="main-text">
          {{citing.text}}
        </div>
      </div>
    </footer>

  </div>
</template>

<script>
export default {
  name: 'level_',
  data () {
    return {
      tableData: [
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        },
        {
          levelNum: '0',
          levelName: '游民',
          levelTime: '大于0小时',
          levelUp: '500金币',
          levelAdd: 'x1'
        }
      ],
      tips: {
        title: '等级的好处',
        tipsList: ['1：每日获得更高的金币上限', '2：完成任务获得更多的任务奖励', '3：参与特定等级的福利活动；']
      },
      citing: {
        title: '任务金币加成举例',
        text: '如您完成日常任务“游戏在线2小时”，等级为0级时（游民），将获得50金币,如等级为3级（战士）时，同样的任务您将获得50金币*1.2（等级加成）=60金币'
      }
    }
  }
}
</script>

<style lang='less' scoped>
.zq_level {
  background-color: #fff;
  header {
    height: 45px;
    width: 100%;
    display: flex;
    text-align: center;
    line-height: 45px;
    color: rgba(0, 0, 0, 1);
    border-bottom: 1px solid rgba(244, 244, 244, 1);
    background-color: #fff;
    .header-icon {
      width: 4px;
      height: 16px;
      background: rgba(230, 0, 18, 1);
      display: inline-block;
      vertical-align: -3px;
      margin-right: 4px;
      margin-left: 10px;
      margin-top: 15px;
    }
    .header-text {
      font-size: 16px;
      font-weight: 400;
    }
  }
  main {
    height: 400px;
    .main_tab {
      padding: 20px;
    }
  }
  footer {
    .main-cont {
      padding:  30px;
      p {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
}
      .dj-tips {
    width: 151px;
}
.dj-sm {
    width: 201px;
}
.main-sm {
    margin-top: 50px;
    width: 214px;
    height: 36px;
    background: rgba(242, 245, 247, 1);
    border-radius: 18px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: rgba(230, 0, 18, 1);
    line-height: 36px;
}
.main-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    margin: 10px 0;
    width: 500px;
}
.main-tips {
    margin-top: 30px;
    width: 135px;
    height: 44px;
    background: rgba(230, 0, 18, 1);
    border-radius: 22px;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    font-weight: bold;
    color: rgba(242, 245, 247, 1);
}
    }
  }
}
</style>
